<template>
    <div class='product-list'>
        <header>
            <div class='back'
                @click='back'
            >
                <img src='https://jp.juancdn.com/jpwebapp_v1/images_v1/user/arrow_black.png?578e3149-1&sv=449ce9ee'>
            </div>
    
            <div class='title'>
                <span>{{title}}</span>
            </div>
        </header>
        <main>
            <div class='product-box'>
                <productList :resource = 'productList'></productList>
            </div>
        </main>
    </div>
</template>

<script>
    import productList from 'components/commons/single/single-list'
    import Vue from 'vue'
    import VueJsonp from 'vue-jsonp'
    import axios from 'axios'
    import BScroll from 'better-scroll'
    import {Indicator,Toast} from 'mint-ui'

    Vue.use(VueJsonp)

    export default {
        data() {
            return {
                fcate:null,
                productList:null,
                key:null,
                title:null,
                pages:1
            }
        },
        components: {
            productList
        },
        methods:{
            back(){
                this.$router.back()
            }
        },
        async created() {
             Indicator.open({
                text: '加载中~',
                spinnerType: 'fading-circle'
            });
          await axios.get('/cate/subcatelist',{
                params:{
                    cate_id: this.$route.params.id,
                    pf: 8,
                    area: 4,
                    bi: 222,
                    source: null,
                    front_cid: null
                }
            })
            .then(res=>{
                this.key = res.data.key
                this.title = res.data.name
                 Indicator.close()
            })
           setTimeout(()=>{
                Vue.jsonp('https://shop.juanpi.com/gsort', {
                    key:this.key,
                    type: 50,
                    zhouyi_ids: 'p8_c4_l4',
                    machining: 'danpin',
                    page: this.pages,
                    rows: 10,
                    dtype: 'JSONP',
                    price_range: '',
                    cat_threeids: '',
                    filter_id: '',
                    callback: 'gsort_callback',
            
                })
                .then(res=>{
                    this.productList = res.list
                })
                .catch(err =>console.log(err))
           },0)
             
        },
        watch:{
            productList(){
                let that = this
                that.scroll = new BScroll('.product-box',{
                     pullUpLoad: {
                        threshold: 20
                    },
                    click:true
                })
                that.scroll.on('pullingUp',()=>{

                    that.pages++
                    Vue.jsonp('https://shop.juanpi.com/gsort', {
                        key:this.key,
                        type: 50,
                        zhouyi_ids: 'p8_c4_l4',
                        machining: 'danpin',
                        page: that.pages,
                        rows: 10,
                        dtype: 'JSONP',
                        price_range: '',
                        cat_threeids: '',
                        filter_id: '',
                        callback: 'gsort_callback',
                
                    })
                    .then(res=>{
                        this.productList = res.list
                    })
                    .catch(err =>console.log(err))
                    })
                 that.scroll.finishPullUp()
            }
        }
    }
</script>

<style lang="stylus">
.product-list
     height 100%
     background #fff
     display flex
     flex-direction column
     header
        z-index 1000
        height .88rem
        line-height .88rem
        font-size .36rem
        width 100%
        overflow inherit
        position relative
        border-bottom 1px solid #dedede
        background #fff
        text-align center
        .back
            width 50px
            height 50px
            padding 20px
            left 0
            top 0
            position absolute
            img
                width 100%
                height 100%
    main
        flex 1
        height 100%
        .product-box
            height 100%
</style>